<template>
  <div class="home-panel experts-recommend">
    <div class="panel-header">
      <text class="panel-header--title">专家推荐</text>
    </div>
    <div class="experts-recommend-box">
      <!-- 专家数据 -->
      <div class="recommends-container">
        <swiper
          class="recommend-swiper"
          :indicator-dots="swiper.indicatorDots"
          :autoplay="swiper.autoplay"
          :interval="swiper.interval"
          :duration="swiper.duration"
          :current="activeIndex"
          indicator-active-color="#f54305"
          indicator-color="#d9d9d9"
          previous-margin="230rpx"
          next-margin="230rpx"
          @change="onChangeExperts"
        >
          <swiper-item v-for="item in list" :key="item.userId">
            <div class="recommend-container">
              <div class="recommend-header">
                <image
                  class="recommend-header--image"
                  :src="item.professorPic"
                  :alt="item.professorName"
                />
              </div>
              <div class="recommend-main">
                <div class="recommend-main--name">{{ item.professorName }}</div>
                <div class="recommend-main--job ui-ellipsis--l2">{{ item.appellation }}</div>
              </div>
            </div>
          </swiper-item>
        </swiper>
      </div>
      <!-- 专家课程数据 -->
      <div class="experts-lession">
        <swiper
          class="experts-lession-swipe"
          :indicator-dots="swiper.indicatorDots"
          :autoplay="swiper.autoplay"
          :interval="swiper.interval"
          :duration="swiper.duration"
          ref="lessionSwiper"
        >
          <!-- slides -->
          <swiper-item v-for="item in activeLession" :key="item.lessonId">
            <homeLession
              :lessonPicPath="item.lessonPicPath"
              :lessonName="item.lessonName"
              :lessonId="item.lessonId"
              :lecturePic="item.lecturePic"
              :lecturerName="item.lecturerName"
              :lessonPrice="item.lessonPrice"
              :clickNum="item.clickNum"
              :subNum="item.subNum"
            ></homeLession>
          </swiper-item>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { selectProfessorLessons } from "api/order/lession.js";
import homeLession from "@/components/business/lession/lession-row.vue";

export default {
  name: "HomeEssenceLecturer",
  components: {
    homeLession
  },
  props: {},
  data() {
    let _this = this;
    return {
      list: [],
      activeIndex: 1,
      activeLession: [],
      page: {
        currentPage: 1,
        pageNumber: 10,
        totalNumber: 0,
        totalPage: 1
      },
      lessionSwiperOption: {
        centeredSlides: true,
        initialSlide: 0,
        watchActiveIndex: true
      },
      swiper: {
        indicatorDots: false,
        autoplay: false,
        interval: 2000,
        duration: 500
      }
    };
  },

  created() {
    this.loadEssenceLecturerList();
  },
  mounted() {},
  methods: {
    handleClickGotoLession() {
      this.$router.push(`/lession`);
    },
    onChangeExperts(event) {
      let current = event.detail.current;
      this.activeLession = this.list[current] && this.list[current].lessonResps;
    },
    // 加载推荐的课程
    loadEssenceLecturerList() {
      var self = this;
      selectProfessorLessons().then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          // 加载失败
          this.isloading = false;
          this.$toast.fail(respMsg);
          return;
        }
        this.list = result;
        if (this.list && this.list.length) {
          this.activeLession = this.list[this.activeIndex].lessonResps;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.experts-recommend {
  padding: 0 30rpx 28rpx 30rpx;
  width: 100%;
  background-color: #fff;
  margin-top: 0.21333rem;
  box-sizing: border-box;

  .recommend-swiper {
    position: relative;
    &::before {
      position: absolute;
      top: 0;
      left: 230rpx;
      right: 0;
      background-color: #f3f3f4;
      content: "";
      width: 230rpx;
      height: 341rpx - 24rpx;
      border-radius: 8rpx;
    }
    &::after {
      position: absolute;
      top: 341rpx - 24rpx;
      left: 93rpx + 230rpx;

      background-color: #f3f3f4;
      content: "";
      width: 0;
      height: 0;
      border-width: 24rpx 24rpx 0;
      border-style: solid;
      border-color: #f3f3f4 #fff #fff; /*灰 透明 透明 */
    }
  }
  .recommend-container {
    text-align: center;
    padding-top: 32rpx;
    height: 341rpx;
    box-sizing: border-box;

    .recommend-header {
      .recommend-header--image {
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
      }
    }
    .recommend-main {
      margin-top: 23rpx;
      .recommend-main--name {
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #2c2c35;
      }
      .recommend-main--job {
        margin-top: 10rpx;
        font-size: 20rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #aeafc0;
        padding: 0 10rpx;
        line-height: 30rpx;
      }
    }
  }
  // 设置选中的样式
  .swiper-slide {
    position: relative;
    width: 230rpx;
  }
  // 专家推荐课程样式
  .experts-lession {
    margin-top: 32rpx + 24rpx;
  }
}
</style>
